<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 10px;">
      <!-- 条件搜索 -->
      <div class="table-page-search-wrapper">
        <a-form :labelCol="labelCol" :wrapperCol="wrapperCol" ref="queryForm">
          <a-row :gutter="32">
            <a-col :span="6">
              <a-form-item label="主机IP">
                <a-select
                  placeholder="请选择主机IP"
                  v-model="queryParam.hostIp"
                  style="width: 100%"
                  allow-clear
                  :showSearch="true"
                  @focus="queryEnableHostList"
                >
                  <a-select-option v-for="(d, index) in enableHostList" :key="index" :value="d.hostIp">{{ d.hostIp }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="操作系统类型">
                <a-spin size="small" :spinning="spinning">
                  <a-input v-model="queryParam.hostSystemType" placeholder="显示系统类型"/>
                </a-spin>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <span class="table-page-search-submitButtons" style="float: right;">
                <a-button type="primary" @click="searchHostSystemType"><a-icon type="search"/>查询主机操作系统类型</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false" class="table-card tab-css">
      <a-tabs default-active-key="blank">
        <a-tab-pane key="centos">
          <span slot="tab">
            Centos
          </span>
          <a-layout>
            <a-layout-content>
              <a-steps :current="current" size="small">
                <a-step v-for="item in steps" :key="item.title" :title="item.title" />
              </a-steps>
              <!-- 第一步 -->
              <div class="steps-content" v-if="current === 0">
                <a-alert message="此处提供的是官方的yum源仓库，如果因为网络问题不能访问，也可选择国内的地址，比如阿里云：https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo" type="info"/>
                <br/>
                <br/>
                <br/>
                <a-spin size="small" :spinning="spinningForCentosStep1">
                  <a-input-search placeholder="请输入可用的docker仓库地址" size="large" @search="addRepo" v-model="repo">
                    <a-button slot="enterButton">
                      <a-icon type="tool" />添加yum源仓库
                    </a-button>
                  </a-input-search>
                </a-spin>
              </div>
              <!-- 第二步 -->
              <div class="steps-content steps-content-center" v-if="current === 1">
                <a-spin size="small" :spinning="spinningForCentosStep2">
                  <a-select
                    placeholder="请选择docker版本"
                    v-model="dockerVersion"
                    style="width: 50%"
                    allow-clear
                    :showSearch="true"
                  >
                    <a-select-option v-for="(v, index) in dockerVersionList" :key="index" :value="v">{{ v }}</a-select-option>
                  </a-select>
                </a-spin>
              </div>
              <!-- 第三步 -->
              <a-spin size="small" :spinning="spinningForCentosStep3">
                <div class="steps-content steps-content-center" v-if="current === 2">
                  <a-textarea placeholder="Basic usage" :rows="30" v-model="newInstallScript" allowClear/>
                </div>
                <div class="steps-action">
                  <a-button v-if="current > 0" style="margin-right: 10px" @click="prev">
                    上一步
                  </a-button>
                  <a-button v-if="current < steps.length - 1" type="primary" @click="next">
                    下一步
                  </a-button>
                  <a-button
                    v-if="current == steps.length - 1"
                    type="primary"
                    @click="install"
                  >
                    安装
                  </a-button>
                </div>
              </a-spin>
            </a-layout-content>
          </a-layout>
        </a-tab-pane>
        <!-- <a-tab-pane key="ubuntu">
          <span slot="tab">
            Ubuntu
          </span>
          Tab 2
        </a-tab-pane> -->
        <a-tab-pane key="blank">
          <span slot="tab">
            引导页
          </span>
          <a-layout>
            <a-layout-content>
              <a-alert message="1、输入IP，查询主机的操作系统类型" type="info"/>
              <br/>
              <a-alert message="2、选择合适的操作系统类型，根据引导一步步执行安装" type="info"/>
              <br/>
            </a-layout-content>
          </a-layout>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>
<script>
import { getEnalbeList } from '@/api/dockerinsight/host'
import { getHostSystemType, addYumRepo, getDockerVersion, install } from '@/api/dockerinsight/dockerinstall'
import AdvanceTable from '@/components/pt/table/AdvanceTable'
export default {
  name: 'DockerInstall',
  components: {
    AdvanceTable

  },
  data() {
    return {
      dockerVersion: undefined,
      // 可用主机列表
      enableHostList: [],
      installScript: `
#!/bin/bash

# 设置 Docker 版本
DOCKER_VERSION="chooseVersion"  # 替换为你需要的版本号

# 更新 yum 包索引
sudo yum update -y

# 安装必要的依赖包
sudo yum install -y yum-utils device-mapper-persistent-data lvm2

# 添加 Docker 的阿里云仓库
sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

# 更新 yum 包索引
sudo yum makecache fast

# 检查指定版本的 Docker 是否可用
if ! sudo yum list docker-ce-$DOCKER_VERSION --showduplicates | grep -q $DOCKER_VERSION; then
  echo "Docker 版本 $DOCKER_VERSION 不可用，请检查版本号是否正确。"
  exit 1
fi

# 安装特定版本的 Docker CE
sudo yum install -y docker-ce-$DOCKER_VERSION docker-ce-cli-$DOCKER_VERSION containerd.io

# 检查 Docker 是否安装成功
if [ $? -eq 0 ]; then
  echo "Docker $DOCKER_VERSION 已成功安装！"
  # 启动 Docker 服务
  sudo systemctl start docker
  # 设置开机自启
  sudo systemctl enable docker
else
  echo "Docker 安装失败，请检查错误信息。"
fi
`,
      dockerVersionList: [],
      repo: 'https://download.docker.com/linux/centos/docker-ce.repo',
      current: 0,
      steps: [
        {
          title: '添加yum源仓库'
        },
        {
          title: '选择可用版本'
        },
        {
          title: '安装执行'
        }
      ],
      spinning: false,
      spinningForCentosStep1: false,
      spinningForCentosStep2: false,
      spinningForCentosStep3: false,
      // 查询参数
      queryParam: {
        hostSystemType: undefined,
        hostIp: undefined
      },
      loading: false,
      // label的百分比
      labelCol: { span: 6 },
      // 内容区域的百分比
      wrapperCol: { span: 18 }
    }
  },
  computed: {
    newInstallScript () {
      const textToReplace = 'chooseVersion'
      const replacementText = this.dockerVersion
      return this.installScript.replace(textToReplace, replacementText)
    }
  },
  created() {
    this.queryEnableHostList()
  },
  methods: {
    /** 查询可用主机列表 */
    queryEnableHostList() {
      getEnalbeList().then(response => {
        this.enableHostList = response.data
      })
    },
    next() {
      if (this.current === 0) {
        if (!this.queryParam.hostIp) {
          this.$message.warn('请输入正确的IP！')
          return
        }
        this.searchDockerVersion()
      }
      this.current++
    },
    prev() {
      this.current--
    },
    /** 执行安装**/
    install () {
      if (!this.queryParam.hostIp) {
        this.$message.warn('请输入正确的IP！')
        return
      }
      this.spinningForCentosStep3 = true
      const requestData = {}
      requestData.ip = this.queryParam.hostIp
      requestData.script = this.newInstallScript
      install(requestData).then(response => {
        this.$message.info('安装成功!')
        this.spinningForCentosStep3 = false
      }).catch(error => {
        console.log(error)
        this.spinningForCentosStep3 = false
      })
    },
    /** 查询docker版本**/
    searchDockerVersion () {
      this.spinningForCentosStep2 = true
      const requestParams = {}
      requestParams.ip = this.queryParam.hostIp
      getDockerVersion(requestParams).then(response => {
        this.dockerVersionList = response.data
        this.spinningForCentosStep2 = false
      }).catch(error => {
        console.log(error)
        this.spinningForCentosStep2 = false
      })
    },
    /** 添加repo**/
    addRepo (value) {
      if (!value) {
        this.$message.warn('请输入正确的库地址！')
        return
      }
      this.spinningForCentosStep1 = true
      const requestData = {}
      requestData.ip = this.queryParam.hostIp
      requestData.repo = value
      addYumRepo(requestData).then(response => {
        this.$message.info(response.data)
        this.spinningForCentosStep1 = false
      }).catch(error => {
        console.log(error)
        this.spinningForCentosStep1 = false
      })
    },
    /** 查询操作系统类型**/
    searchHostSystemType () {
      if (!this.queryParam.hostIp) {
        this.$message.warn('请输入正确的IP！')
        return
      }
      this.spinning = true
      getHostSystemType(this.queryParam.hostIp).then(response => {
        this.queryParam.hostSystemType = response.data
        this.spinning = false
      }).catch(error => {
        console.log(error)
        this.spinning = false
      })
    }
  }
}
</script>
<style lang="css" scoped>
  .ant-layout-content {
    background: #ffff;
    color: #1b1818;
    min-height: calc(100vh - 196px);
    padding: 20px 20px;
  }
  .steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #ffff;
    min-height: 500px;
    text-align: left;
    padding-top: 10px;
  }
  .steps-content-center {
    text-align: center !important;;
  }
.steps-action {
  margin-top: 24px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
</style>
